<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import {Card} from "ant-design-vue";

import type { VxeGridListeners, VxeGridProps } from "#/adapter";
import { useVbenVxeGrid } from "#/adapter";

import { gridDiskSchemas as gridSchemas } from "./schemas";

const props = defineProps({
  data: { type: Array, default: [] },
});

const gridOptions: VxeGridProps<any> = {
  ...gridSchemas,
  toolbarConfig: {
    ...gridSchemas.toolbarConfig,
    slots: {
      buttons: "toolbar-buttons",
    },
    custom: {
      // 自定义列-图标
      icon: "vxe-icon-menu",
    },
  },
  border: "inner",
  keepSource: true,
  data: [],
  pagerConfig: {
    enabled: false,
  },
  proxyConfig: {},
};

const [CupGrid, gridApi] = useVbenVxeGrid({
  gridOptions,
});

watch(
  () => props.data,
  (newData) => {
    gridApi.setGridOptions({ data: newData });
  },
  { deep: true }
);

onMounted(async () => {
  gridApi.setGridOptions({ data: props.data });
});
</script>
<template>
  <Card size="small" class="no-padding">
    <template #title>
      <div class="flex items-center justify-start gap-[6px]">
        <span>磁盘状态</span>
      </div>
    </template>
    <CupGrid />
  </Card>
</template>
